<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            v-for 循环数组 (item, index) in arr item 和 index是变量可以自己定义 item表示数组的数组项 index表示的是索引值
            v-for循环对象的时候有三个参数 （value, key, index） in obj value是对象中键值对的值 key是键值对的键 index是下标
        -->
        <!-- <div v-for="(item, index) in arr">
            {{item.name}} --{{index}}
        </div> -->

        <div v-for="(value, key, index) in tels">
            {{key}} -- {{value}} 
            <!-- -- {{index}} -->
        </div>

        <div class="strbox" v-for="item in str">{{item}}</div>

        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            data: {
                arr: ['张三', '李四', '王五'],
                // arr: [
                //     {
                //         name: "zhangsan"
                //     },
                //     {
                //         name: "lisi"
                //     }
                // ]
                tels:{
                    "zhangsan": 1234,
                    "lisi": 12345,
                    "wangwu": 123456
                },
                str: "你是个马概"
            }
        }).$mount('#app')
    </script>
</body>
</html>